import React, {useState, useMemo, useEffect, useCallback} from 'react';
import {Spin, Row, Col} from 'antd';
import {roomDetail as getRoomDetail} from '~/service/liveMonitor';
import CommonCard from '../../common/CommonCard';
import {roomMessageMap} from '../../config';
import PeopleNumber from './PeopleNumber';
import RoomDetail from './RoomDetail';
import TeacherDetail from './TeacherDetail';
import TeacherEvents from './TeacherEvents';

import './index.styl';

const TEACHER_EVENTS_PAGER = {
    pageSize: 100,
    pageNum: 1,
    count: 0
};


const withApiCard = Element => ({params, title, setFormLoading, pager}) => {

    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);

    const getRoomMessage = useCallback(params => {

        const {dashBoardId} = roomMessageMap.get(title);
        const dashBoardList = [
            {
                dashBoardId,
                dashBoardName: dashBoardId
            }
        ];

        const resultParams = {
            dashBoardList,
            dimensionAndValues: params
        };

        if (pager && Object.keys(pager).length > 0) {
            resultParams.pager = pager;
        }

        setLoading(true);
        setFormLoading(true);
        getRoomDetail(resultParams).then(res => {

            if (res?.code === 0 && res.data) {
                const {
                    data = {}
                } = res;
                setData(data);
                setFormLoading(false);
                setLoading(false);
            }
        });
    }, [title, setFormLoading, pager]);

    useEffect(() => {
        if (params.length > 0) {
            getRoomMessage(params);
        }
    }, [params, getRoomMessage]);

    return (
        <Spin spinning={loading}>
            <Element data={data} title={title} params={params} />
        </Spin>
    );
};

export default props => {
    const {params, setFormLoading} = props;

    const PeopleNumberContent = useMemo(() => withApiCard(PeopleNumber), []);
    const RoomDetailContent = useMemo(() => withApiCard(RoomDetail), []);
    const TeacherDetailContent = useMemo(() => withApiCard(TeacherDetail), []);
    const TeacherEventsContent = useMemo(() => withApiCard(TeacherEvents), []);

    return (
        <Row className="liveRoomInformation">
            <Col>
                <CommonCard title="人数信息">
                    <PeopleNumberContent
                        title="人数信息"
                        params={params}
                        setFormLoading={setFormLoading}
                    />
                </CommonCard>
            </Col>
            <Col className="margin-left-8">
                <CommonCard title="直播间信息">
                    <RoomDetailContent
                        title="直播间信息"
                        params={params}
                        setFormLoading={setFormLoading}
                    />
                </CommonCard>
            </Col>
            <Col className="margin-left-8">
                <CommonCard title="老师信息">
                    <TeacherDetailContent
                        title="教师信息"
                        params={params}
                        setFormLoading={setFormLoading}
                    />
                </CommonCard>
            </Col>
            <Col className="margin-left-8">
                <CommonCard title="老师关键事件">
                    <TeacherEventsContent
                        title="老师关键事件"
                        params={params}
                        setFormLoading={setFormLoading}
                        pager={TEACHER_EVENTS_PAGER}
                    />
                </CommonCard>
            </Col>
        </Row>
    );
};
